<template>
  <div class="modal-from">
    <a-modal
      title="指派医生"
      :width="1200"
      style="top: 50px"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="submit"
      @cancel="handleCancel"
    >
      <a-row :gutter="24" style="margin-top: 20px; margin-bottom: 10px">
        <a-col :md="24" :sm="24" style="font-weight: bold"> 客户消费项目列表 </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="6" :sm="24"> 治疗单号：20201654 </a-col>
        <a-col :md="6" :sm="24"> 姓名：{{ row_record.clientName }} </a-col>
        <a-col :md="6" :sm="24"> 卡号：{{ row_record.cardNo }} </a-col>
        <a-col :md="6" :sm="24"> 档案号：200055 </a-col>
      </a-row>
      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :md="6" :sm="24"> 联系方式：{{ row_record.tel }} </a-col>
        <a-col :md="12" :sm="24">
          <div class="remarks-style-box">
            <span>备注：</span>
            <a-textarea
              style="width: calc(100% - 42px)"
              v-model="remarksVal"
              placeholder="请输入备注"
              :auto-size="{ minRows: 2, maxRows: 4 }"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" style="margin-top: 20px; margin-bottom: 10px">
        <a-col :md="24" :sm="24" style="font-weight: bold"> 客户消费项目列表 </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-table
          :columns="columns"
          :data-source="dataList"
          :rowKey="(record, index) => index"
          :pagination="false"
          :bordered="false"
          :loading="tableLoading"
        >
          <template slot="attending" slot-scope="text, record, index">
            <!-- 主诊医生 -->
            <a-select
              :value="text"
              style="width: 120px"
              @change="(value, option) => valChange(value, record, index, 'attending',option)"
              :class="record.attendingBorder ? 'colorBorder' : ''"
              @blur="blurChange('attendingBorder', 'attending')" 
            >
              <a-select-option v-for="(item) in record.attendingDoctorSelect" :value="item.erpId" :key="item.name">{{item.name}}</a-select-option>
            </a-select>
          </template>
          <template slot="doctorAssistant" slot-scope="text, record, index">
            <!-- 治疗医生 -->
            <a-select
              :value="text"
              style="width: 120px"
              @change="(value, option) => valChange(value, record, index, 'doctorAssistant',option)"
              :class="record.doctorAssistantBorder ? 'colorBorder' : ''"
              @blur="blurChange('doctorAssistantBorder', 'doctorAssistant')"
            > 
              <a-select-option v-for="(item) in record.doctorAssistantSelect" :value="item.erpId" :key="item.name">{{item.name}}</a-select-option>
            </a-select>
          </template>
          <template slot="beautician" slot-scope="text, record, index">
            <!-- 美容医生 -->
            <a-select
              :value="text"
              style="width: 120px"
              @change="(value, option) => valChange(value, record, index, 'beautician',option)" 
              :disabled="record.beauticianSelect.length < 1 && true"
            > 
                <a-select-option v-for="(item) in record.beauticianSelect" :value="item.erpId" :key="item.name">{{item.name}}</a-select-option> 
            </a-select>
          </template>
          <template slot="anesthetist" slot-scope="text, record, index">
            <!-- 麻醉师 -->
            <a-select
              :value="text"
              style="width: 120px"
              @change="(value, option) => valChange(value, record, index, 'anesthetist',option)"
              :disabled="record.anesthesiologistSelect.length < 1 && true"
               
            >
              <a-select-option v-for="(item) in record.anesthesiologistSelect" :value="item.erpId" :key="item.name">{{item.name}}</a-select-option> 
            </a-select>
          </template>
          <template slot="nurse" slot-scope="text, record, index">
            <a-select
              :value="text"
              style="width: 120px"
              @change="(value, option) => valChange(value, record, index, 'nurse',option)"
              :class="record.nurseBorder ? 'colorBorder' : ''"
              @blur="blurChange('nurseBorder', 'nurse')"
            > 
              <a-select-option v-for="(item) in record.nurseSelect" :value="item.erpId" :key="item.name">{{item.name}}</a-select-option> 
            </a-select>
          </template>
        </a-table>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { SelectConsultItemReview, UpdateTbConsultItem, SelectDoctor } from '@/api/modular/main/customer/cashier'

export default {
  props: {
    row_record: {
      type: Object,
      default: () => {
        {
        }
      },
    },
    project_data: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      tableLoading: false,
      dataList: [],
      value: [],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      pagination: {
        current: 1, //当前页
        pageSize: 10, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      columns: [
        { title: '序号', customRender: (text, record, index) => index + 1, width: 80, align: 'center' },
        { title: '项目名称', dataIndex: 'itemName', width: 180, align: 'center' },
        { title: '数量', dataIndex: 'rqty', width: 120, align: 'center' },
        {
          title: '主诊医生',
          dataIndex: 'attending',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'attending' },
        },
        {
          title: '医生助理',
          dataIndex: 'doctorAssistant',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'doctorAssistant' },
        },
        {
          title: '美容师',
          dataIndex: 'beautician',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'beautician' },
        },
        {
          title: '麻醉师',
          dataIndex: 'anesthetist',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'anesthetist' },
        },
        { title: '护士', dataIndex: 'nurse', width: 120, align: 'center', scopedSlots: { customRender: 'nurse' } },
      ],
      selectedRowKeys: [],

      checkSelectData: [],
      remarksVal: '',

     
    }
  },
  created() {
    SelectDoctor().then((res) => {
      if (res.code != 200) {
        return false
      }
      let data = res.rows
      var echararr = []
      for (var i = 0; i < data.length; i++) {
        var arrindex = echararr.findIndex((item, index, arr) => {
          return item.deptId === data[i].deptId
        }) //获取下标
        if (arrindex == -1) {
          //不存在盘符数据的添加盘符数据
          echararr.push({
            deptId: data[i].deptId,
            data: [data[i]],
          })
        } else {
          //有盘符则往盘符数据中添加
          echararr[arrindex].data.push(data[i])
        }
      }

      localStorage.setItem('DepartmentEchararr', JSON.stringify(echararr))
    })
  },

  methods: {
    // 退款的blur 事件
    blurChange(t, rep) {
      setTimeout(() => {
        // 判读输入框实退金额是否输入
        console.log(t, rep)
        let setData = this.dataList.map((item) => {
            if (item[`${rep}`] != undefined && item[`${rep}`] !== '' && item[`${rep}`] != null) {
            item[`${t}`] = false
            } else {
            item[`${t}`] = true
            }
            return item
        })
        console.log(setData)
        this.dataList = [...setData]
      }, 500);
    },
    // change事件赋值
    valChange(value, record, index, t,option='') { 
        console.log(value)
      this.dataList[index][`${t}`] = value
      this.dataList[index][`${t}_Name`] = option.key
      console.log(this.dataList)
      this.dataList = [...this.dataList]
    },

    // 过滤数据
    getFilterDataFunc(type, arrName, data, depId){
        // let newData = data.find(elemt => {
        //     return elemt.deptId == depId
        // }).data.find(elemt2 => { 
        //     return elemt2.type == type
        // })[`${arrName}`]
        // return newData

        let newData = []
        let boolData = data.find(elemt => {
            return elemt.deptId == depId
        }) 
        if(boolData){  
            let setData = boolData.data.find(elemt2 => { 
                return elemt2.type == type
            })
            if(setData){
                newData = setData[`${arrName}`]
            }else{
                newData = []
            }  
        }  
        return newData
    },

    show() {
      this.visible = true
      this.disabled = true
      //   this.tableLoading = true
      this.selectedRowKeys = [] // 进入页面清空选中项

      console.log(this.row_record)
      console.log(this.project_data)
      let selectData = JSON.parse(localStorage.getItem('DepartmentEchararr'))
       

       

      this.project_data.map((item) => {
        item.attending = ''
        item.doctorAssistant = ''
        item.beautician = ''
        item.anesthetist = ''
        item.nurse = ''
        item.attendingBorder = false
        item.doctorAssistantBorder = false  
        item.nurseBorder = false
  
        // 主诊医生下拉    
        item.attendingDoctorSelect = this.getFilterDataFunc(1, 'attending', selectData, item.execDept)
        
        // 医生助理下拉 
        item.doctorAssistantSelect = this.getFilterDataFunc(2, 'doctorAssistant', selectData, item.execDept)

        // 美容师下拉
        item.beauticianSelect = this.getFilterDataFunc(3, 'beautician', selectData, item.execDept)
        
        // 麻醉师下拉
        item.anesthesiologistSelect = this.getFilterDataFunc(4, 'anesthetist', selectData, item.execDept)
        
        // 护士 
        item.nurseSelect = this.getFilterDataFunc(5, 'nurse', selectData, item.execDept)
  
      })
      this.$nextTick(() => {
        this.dataList = this.project_data
        console.log("this.project_data:",this.project_data)
      })

      
    },
    submit() {
      console.log(this.dataList)
      let Num = []
      let setData = this.dataList.map((item, index) => {
        if (!item.attending) {
          item.attendingBorder = true
          Num.push(1)
        } else {
          item.attendingBorder = false
        }
        if (!item.doctorAssistant) {
          item.doctorAssistantBorder = true
          Num.push(1)
        } else {
          item.doctorAssistantBorder = false
        }
         
        
        if (!item.nurse) {
          item.nurseBorder = true
          Num.push(1)
        } else {
          item.nurseBorder = false
        }

        return item
      })
      this.dataList = setData

      if (Num.length > 0) {
        this.$message.error('请先选择主诊医生、医生助理、护士')
        return false
      }
 

    console.log(this.dataList) 
      let newData = this.dataList.map(item => {
        return {
            rqty: item.rqty,
            tbConsultItemId: item.tbConsultItemId,
            clientId: item.clientId,
            remarks: this.remarksVal,

            // 下拉
            mainDrId: item.attending,
            treatDrId: item.doctorAssistant,
            beautyDrId: item.beautician,
            hocusDrId: item.anesthetist,
            nurseDrId: item.nurse, 
            
            mainDrName: item.attending_Name,
            treatDrName: item.doctorAssistant_Name,
            beautyDrName: item.beautician_Name,
            hocusDrName: item.anesthetist_Name,
            nurseDrName: item.nurse_Name,
            itemName: item.itemName
            
        }
      }) 
      let sendData = {
          manyLines: newData
      }
      UpdateTbConsultItem(sendData).then((result) => {
        if (result.code == 200) {
          this.visible = false 
          this.$message.success(result.message)
          this.$nextTick(() => {
            this.$emit('projectAddOk')
          })
        } else {
          this.$message.error(result.message)
        }
      })
 
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .colorBorder {
  .ant-select-selection {
    border-color: red !important;
  }
}
/deep/ .ant-card-head-title {
  font-weight: bold;
}
/deep/ .ant-page-header-heading-title {
  font-weight: normal;
  font-size: 16px;
}
/deep/ .ant-card-body {
  padding: 24px 12px 0;
}
/deep/ .ant-form-item-control-wrapper {
  width: 100%;
}
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-tbody > tr > td {
  padding: 10px 16px !important;
}
.remarks-style-box {
  display: flex;
  span {
    display: block;
    width: 42px;
  }
}
</style>